<template>
  <div class="login container">
    <Header><span>修改密码</span></Header>
    <section>
        <div class="login-tel">
          <input type="text" v-model="userPwd" placeholder="请输入新的密码">
        </div>
        <div class="login-btn" @click="submitBtn">确认修改</div>
        
    </section>
    <Tabbar></Tabbar>
  </div>
</template>

<script>
import Tabbar from '@/components/common/Tabbar.vue'
import Header from '@/views/login/Header.vue'
import { Toast } from 'mint-ui';
import http from '@/common/api/request.js'
export default {
  data() {
    return {
        userPwd: '',
        rules:{//手机号验证
            userPwd:{
                rule:/^\w{6,12}$/,
                msg:'密码不能为空,并且是6-12位数字'
            }
        }
    }
  },
    components: {
        Tabbar,
        Header
    },
    methods: {
      submitBtn() {
         if( !this.validate('userPwd') ) return;

        // 确认修改
         http.$axios({
          url:'/api/recovery',
          method:'POST',
          data:{
            phone: this.$route.query.phone,
            pwd: this.userPwd
          }
        }).then(res=>{
        //   console.log(res)
        Toast('修改成功')
          if(res.success) {
            this.$router.push({
                path: '/login'
            })
          }
        })

      },
      //验证信息提示
      validate( key ){
        let bool = true;
        if( !this.rules[key].rule.test( this[key] )  ){
          //提示信息
          Toast(this.rules[key].msg);
          bool = false;
          return false;
        }
        return bool;
      }
    }
}
</script>

<style scoped>
  section {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #F4F4F4;
  }
  section div {
    margin: .3rem 0;
    width: 8.9rem;
    height: .88rem;
  }
  section input {
    box-sizing: border-box;
    border-radius: .12rem;
    padding: 0 .2rem;
    line-height: .88rem;
    background-color: #FFF;
    border: 1px solid #CCC;
  }
  section .login-tel input {
    font-size: .4rem;
    width: 8.9rem;
  }
  section .login-tel {
    margin-top: .6rem;
  }
  .login-code {
    display: flex;
  }
  .login-code input {
    border-radius: 0;
    flex: 1;
  }
  .login-code button {
    padding: 0 .4rem;
    line-height: .88rem;
    background-color: #b0352f;
    border: 0;
    color: #FFF;
    border-radius: .12rem;
  }
  .login-btn {
    line-height: .88rem;
    background-color: #b0352f;
    text-align: center;
    border-radius: .12rem;
    color: #FFF;
    font-size: .6rem;
    padding: .1rem 0;
  }
</style>